
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: NodeList.on via dojo/query</title>
		<link rel="stylesheet" href="css/demo.css" media="screen">
	</head>
	<body>
		<h1>Demo: NodeList.on via dojo/query</h1>
		<div id="container">
		
		<button id="button1" class="clickMe">Click me</button>
		<button id="button2" class="clickMeAlso">Click me also</button>
		<button id="button3" class="clickMe">Click me too</button>
		<button id="button4" class="clickMeAlso">Please click me</button>
		<button id="button5" class="clickYour">Click me too</button>
		<button id="button6" class="clickYour">Please click me</button>
		
		<div>
		<!-- load dojo and provide config via data attribute -->
		<script src="js/dojo/dojo.js" data-dojo-config="async: true"></script>
		<script>
			require(["dojo/query", "dojo/_base/lang", "dojo/dom", "dojo/on", "dojo/domReady!"], function(query, lang, dom, on) {
				var myObject = {
					id: "myObject",
					onClick: function(evt){
						alert("The scope of this handler is " + this.id);
					}
				};
				query(".clickMe").on("click", myObject.onClick);
				query(".clickMeAlso").on("click", lang.hitch(myObject, "onClick"));
				
				on(dom.byId("container"), ".clickYour:click", myObject.onClick);
			});
		</script>
	</body>
</html>
